<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hex String Audio Player</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .controls {
      margin: 20px 0;
    }

    button {
      padding: 10px 20px;
      margin: 5px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background: #0056b3;
    }

    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    textarea {
      width: 100%;
      height: 100px;
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .status {
      margin: 10px 0;
      padding: 10px;
      border-radius: 4px;
    }

    .success {
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }

    .error {
      background: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
  </style>
</head>

<body>
  <h1>Hex String Audio Player</h1>

  <div class="controls">
    <button id="playBtn" onclick="playAudio()">播放音频</button>
    <button id="stopBtn" onclick="stopAudio()" disabled>停止播放</button>
    <button onclick="loadSampleAudio()">加载示例音频</button>
  </div>

  <div>
    <label for="hexInput">十六进制音频数据:</label>
    <textarea id="hexInput" placeholder="请输入十六进制字符串..."></textarea>
  </div>

  <div id="status"></div>
  <audio id="audio" controls></audio>
</body>
<script>
  window.hexStr = '4944330400000000090a545858580000007700000361696763007b2261696763223a207b224c6162656c223a202231222c2022436f6e74656e7450726f6475636572223a202248554142414253706565636837453031222c202250726f647563654944223a20223034613038663463323566353033333738626434366338353433626636373763227d7d0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000ffe348c40035ec6e714143780002403777777fe222217fd777fddffd111ddddddcf7f444fffffffffa5294a6bffffffe297ffd294a6bdef7bfc535ffffff7a5294a529af4a7ffff9a53fffe35fffef786fde3ca6b30e3ede2bd5f1ef7bbf7efd58ac4310c563cab1a1e681a0742b22661bfdfc3c562b19224a9f340e85032302b158f32c09c390b6138270682a219a0a09a1c7809c43191fb1abe31f82d81a8130463628263fc49c0be011802b013c01e00b00400c0258e98d5f1f30d8d5e87a1e87abd5ea0562b191e53c357a18a09a1a7d0f43d46cec8f158f1e5202709c06ac43c85b4ab25e6f1659236de85ccd7a0dbb94b231670a382dacb4772a2ed6d973950cd596c2134d5a99faeb928244230a36a60b4f526e262fc3e6add0c3756fffe348c43b4c83c2924198c00067a2f93f2ec53c595c3115bd5232f3c0d12a66e2eab6ce333476e0172e38efb657aa0271a13107f632b364b412bb5159430864f06b90eedcc6de77e254d44f6b6cdfc5a454d187ce41178ecbafcaa292d8c4b69239a9c7a61fbd12eeea52c3d41136510a7bafd244ee57ed0599994c0d06c52ab605fcfcdd952fb96d22cda75147b5aec4f74cc1d9f39f0a627176e8f03c2986f5d2bf106281bab1f8d5c779a5a87265a743faa2ef02a9bc05a37c55b41804777b412e5514370734cc64fa3b061fd30e50147855748038715811c101ad99a70d8c200144981c0c7a4fb0b11251f01ae4a5534402ab11f84be02c131e08a034931f54b1f39e5ad9cd2200058fffffe7e5bc2d6b0cab65297f9de87a0300049870ffe348c41c414c6ab279db7800d993091fba799415983090c032833fcf4b5965b187f99cc15729e6e5b29a578962baadd8b3c56066501a66e1a5976df38d7fffcef7fd7dad3c2669c9c8c61302e13333c57354695ebdac0955ba56c57d98ba6b468b50a448f1935ac7ae3fc46ffff9d62d2bf6486fe3e7fffff8fffffe2dead4a76d7f7cc7b67fb5b7ebbff36b4aad804e814a11a0b8b0f82c105b63ddeebccd4f5fbdf19b9e65eab49d1251c6760b01d62de4edbe2b8d7cb791ed213b9a2a9952f0a7082003f2a8238158740ff18e7d9ccddb99c9e5bc37b2c761abe6034cb61deab6c60543c67dd268998f1a0495f9d7c466e91eb9d51180004337d6b5a9051a234d4b5a9148a228308024062a408283013e87f4be6c9bea5a08a495ddf322ffe348c4293e346e9e40ae19a428785382e749036451455dbff5212c0de2b90535274a8e5e496509e654c8dd236ad445cae4509d1098692dbfedeb970982286c450923c4089e7fffba05c2e11427087989161488c8a4957ad549b7fbd525ed71945e616968a85a5980a5bd84caa35f3129bd3b2eb33fb8db442d9a83a3d98ca81c6440eb5044004832e2dd4864ea86a532d82a5d33496e9a089d46f2e5a1b9670c02491055d558d01432714c7e37059c32e81bf8acaccb549b990020101101a0100f844248540d5f11416170e4232aa2eacbb67ce167fd29136a11b28975000081c17aba96b3340fd06a09a43180dc806c601332069690033a0f5caa444ddd0429ba5e9a8b84e1f30351e83e51c2cff2e2ff1f79f9ffe6f8a406356c5c7ff58fffe348c44338144aa649547801fffef7cdf723c6f8ce29e7af75fffffc6b37f8d7fef020b74fac571ffffffffcef1acd7747d9aeadbfffff5f79be2999e0418cc50d42ad7b33766f48779191bd567e230821ca31c3807b92a27a4087512210e214ab135541d4c2dd26647ef938a54797c2543a45508882d802d2245784c93a7e0872d9d36aebd7da2eead8a3340be16f310439a4fd425ed1ec47df38ce339dd2f6891f53bedc1a82bb1615020202433024353ae24032e88425cb7490fcc340498558725b184ae1efe63a8eda5499a45b445e84a3462a7064c6c06302f1b0d24127f2131e1617740c381a957cb5c04925f8d2a5148d596f47a047b07832f45ecaa2944fac7be3b4d10b54f0cbb1529a317ea46b49ef499bef129633896c561e91ffe348c47553dbc25cf19bd000a46b6ed75dfa294d6b3497b0aacbedc0f27c29975325070344d048b1e04630218d226543e543726ede196e535355272dd7836ff1a652d25793d531224b0004822111883418900c000c50c18735408420cce8bb39d7a0d4033f146753b491290a785cc9f98d4a69e189c6f23d09624cbe1a1e1263c9a17a340540b840a3c6c9c072834418c093220466d59dbfe5fe604e5e77a330e469adcba30dcadbc6fb2ed693f2d7e6e596190e430dbb6adce8a354dc934522b283daacf23a33c2848218b6e725f911e33488dc4237840d8936f9390df9d2ef838f88cb99d16a1022647ff965acb5956e6f0c70fcb2a6c29e30d9c080cc6a630d74f08556883a81c76b141198021ab57e731b15a5f52ce55f183cc4363b16ffe348c4384a946e91a1dac8000db0a6090e4b1db825ffbd0de7632b1cb947470dcfccab22c28d1869ce6e86f84e67353586bb7b77efdac79cca557a8e87b0031091e7977f1cf9ffbde3cd6bf55778cadf4620e24e73b7779dbcbbdffbdbc7bbc2eea4ebc1b46bf1e8a63f8e59653d5ab4f5a9eb38ef17dd97bec2008c818c91cc1053adff7feed6a1866dc4ebc6dfd652ecb8b2cbcf2c560b791c86626092061d66b8b32eac65f37da0f92bfcfe46e0f602b0b1e934d46a334ea56d68bf8d553ef18322d6e5f55d1861b58dc670b2d799748dd879256a245f872f4c1192400ed4e534ba728ab5a7f66b1ad33497fefc13412e97bff47dbb5b576c4ae374f7ea32000043d008ff551638924b44f29262e0e480699035a9816143e4821052a20affe348c42040d46ea250a65ed84cfba8e3bd24104fe186703279d6c1bcd8295876efe1876de1cbb73f0cfff3ad563f1a2fd8f413dbc75ff2476a21a89d3bd72e95cbb59b728ca5e17110fc6967269a8ac7e1679dc2df755b3a4965e80d962c48c805707645f965b7e376ea6f76b99e19d89f989bb9f295dc9724c60f4e2c2bbb2aa1a4b5f5bb8f29b7877f1fc285c97485c803e0cf02117ab7b6f1bc6ad87d6dc1d577adcad8404e0274ef3062c29f50739deb72cd2d2349d081963e0438b91d4755ede49e6bb76fe5b999f672c4a12e60d216d25a86a1ae31778aeb56dc17af2f9d7cc1849542a7b66b5d6b5f56ce18aa43bffffba797d3e15777bbf6e9f28e35846c02040d06181619910f38718771d0a92894613f5efd5bd86f97a5b12beeffe348c42f39fc3e84a15b900300a800e8d98a05ab84ae954f6cc8bcab249aeeee931a1304a8b9403341ca1eb26e8ad34d992428d23026c8b8e78ba0da008a80d007be2009a989aa47ec8a08a489aa26aa2042e63421c180835509088348b1b3ae91b7a670e192462604f88f43110be137874a4096aa4a5b3a26ad73675a664686c3945f250b44f6b675bdd7a9da82ce981064cd50bd5ad55ddd915acc8bc80b3893274e25450ecab6b65cc9340ac2cd254962f32d92ff45924992323335268f9aa0e7d857756b4aa71e00801de809389096cdd3711652712f4c4c1f30aa18ec36a708be8612218d0c5398c2611306018706634eb63a9504a003000e8b34e20d02d04f2f068345867480d12d84a42cbc41ca77a0460f063a602a2c034272dac3ffe348c45a503bc250019cc0000c616f2433167a9bf809f2862b4661f93ce3c7551580c868068423837eaf139d7730258679c18550c6bcde42a7db47b5d791c36c8df882e9b271cce57b90d112c4464e856b84bb7c8d43cd76513f11805f065571fea0a910b323a7bf199c8ec62cad459686ebb4d713984982021a679ac6d4d8643d4f4afabab8c3b286ef4b3976530ecf4c44327f2c5fca8653d94549e142198cb80c8a0732525d052b4f362022002a87bb9ccb0ec69fb9a88ee29003fd2fa0ad84ba56cca2d04caae7d6954ed7943b13d4fab328b96e9e1c690906a18a68c218843a9700d280d62e42c9a6ba73b5a4884a35880006940f0da5d9aa9d49ef5bcb79f2aef3e5d89ad705108cb3027700c2297ccc0eb9825210db574d06b8b1d4ffe348c42c48abc296599ad0000840182f14f62c8d4d154a80c82011c57fa663a8d65fd4bf051e2d51b49e3ccdc888ded015117e1048eb2bb48442081681bc10805805b4080c4ce1693778d0b089325f85c79a608a58e24a5daa4831b8c59dd761d97160256f31e3dfd6bba6f14ad0b59cc21ad0302380af18533711150b07546fee0ff4dbb50cbd94721b13501536f54911ab11bd44fc52d353ce38cb3916df77b69a50c51c2b504cfddec5a99e68ed157975b7d65aee72adf96cfdcb18634b9e3efb4ec62457a5ef05cb52e945ab711e5349633117f9da9157b72c8665105d35cb15643da5a92997d6a5abbbfbd63be7cb6f4f6167187a92dd59db128c3e7eb4aea5257001961ffff8e153fb9e596eaca5a4979400d0c109e0b37226b9396effe348c41c397c6e996bd87800be7dcfe53216e2a626269d265c317489985a0807799d4c6bdebb76aee52d652f522546212468858e01be8a321b624d05ebd56a1a68b4275949f1772582fc2e004f00f02340c43fcf37cf2b2ea5a408cf5f459e678c6e7020469f35cd7dab8beaf7f5dd31bffe71ffc7c6b3acfc7dfde7e37f1bc6beaffe3dfe7e37ffffffffb7c6aff1bffff8ce2bbd5f56ac3b52bbb6f7037a8ee0fda989e2bdb22216c09c4fc0829e6d8905b23f852de49edabcd1a9a8faafef69bd5e4dcf8cde76c88df1feab3e358c4f4a3fb5a2ce4092af8b30e74aff72986550f6405a01e4c05b5ad2ebf5f0c70e5ca78cdcd4676ada9bc182786c4aad03d6ed963be37da5a98fc08ac1196a38e73b297596fe7e8564e2d0122c03cbceffe348c449374c6e84a01e18325466eaf6c971f7b0a6d72db269305372ed99af7e89cfdb3cae742ba9b8d9daf7efb77e0b4fd2f77996ef270ed26949247410af6cee3f97ef376db6fe6d5b2cadef9f9bb0aaa43f9aadb8d85915d872f95948a30cde446717e392dbd7aa6444d5c64fa358b5f2ddcdce1a485ce38863aeb8b0be7d465636d9854e347b4cb7cae5838355c20180505885d849e66d45e13992f1ddbbd5354a814273fffe8226841cafb46b5d1cd4be26f18140c2e406cd086d850200a1403483862512cbf6e6f1af9e5432fc39ba1b10dcba28aa0610202418e5c61ae456e659eb1a4dee9bfe9399f3b853f6daf04003a8d5aa3e93723943136e0dc5e675575acc58678dd09b2938846894b080208963dd0acbc90d173ecb0ab345ffe348c47e38dc6e9e4836d25c5478a5f4aeb7529ae4b2fe3a872323ae8d6da15e9112dc569d626a6ea1aadbb6257094e52ecc352dfff49ab8d5dca3e70d947dddb08b2e37bb6ea8da8f56ae786ca1f464e1732be42d99497674d21b75cb3ddc3f608f55a568998b8db04c8914dc348173244a79cac6b3c39dfffffffffcb3ffd6fb4d2c5ceba80020648546cc4c6aae676ce661200b3e01bd8e5deef9dd77bcbb6cbd86220aa48464a6cb427364e72530726c2740ae3c48a96028d5bb54f6f54f0ec35bb12f95c794a107187180010e00840d07169938e0882420052b162b5d6b36aab547769275c27210718830d8198016713e0b70ad2dfc0ad7aed9fcbf58733d526c3e00000000715d15de6647ff2108d232da8abffce7a12453d5d9d9bbffe348c4ad3a4c62ae48d953695dce42127933a64e1384f23f7e421085298bc9026f40b213e2427241f128d2179b468d1a34901b4989ec2ead8f8de6dd25ea1085ce1085eff0cba485d54c414d45332e39392e35555555555555555555240fffffffcf58f2be5ddd4bcfdc3691c26c00810d94c914a9e625996f38fd696dfbd05b020c0084a5bf8199a2b737c91c6581e7011a43173206a5c35076c8a755eb1af9ce5ec22fc3d43d45c5b169b5b1eb7c7ddef7cffa85b7d19722da2120e50c13f001d14a4a8f28d1e977add33ebbd6c667e70992c8cac6a347ede3c8b89be3d21be70648b0e78c50c885ade7e6ee2bfaa495aa955a64bd3fe3e21556a2621a17bffe3586a62987b41c72d8f7348b3629a605441e04e6894f288341a8290f4545ffe348c4c3358c1e9d40c3d0f2460f5b3a96c915c5858e66534e83448f3f73892a4c414d45aaaaaa300413fffff5967fccb78e55180050032062a442354d22d055a6c66ae5ded498836a4351402ba7be6606d66330423653560131b1c081ea687abd0d15f95f6ddbab2b6188ba5ee4655c2e13f56b74ddffc7bad52533b8c3d7231758b2086a2d4bfdfe7efe925f0640ad49bd62505c0b1e8cc3b3bdcb1e5f97cae1f640d554092f510989ab982d76b118a384bba6b088ab637a150141a0e01260a1a092ed27abe6ce676552e3e5eb65b547055323d1f81a8e4525c5544d356c6faef5216ab667627b6b96b6da6f6a36d36c311bb6f5b1356d62d1e3abd42f7dc3e5ab0f92a95cb76069f616af3434566a2304a785a0e47000a312d13b039315ffe348c4f842ebf69168ced8b90669d627597ab4dbbacab48e65d2927c5f7facb5c39dc30e77e93bcf9ae404ef05481a5743440ba503d16acd2ce4a2e491af40ed6939812505a51b2b665469aa229fcf33ed0fe7407427d0f76fe1c582957307a172375d65fb9b64aa0503c80e10572af3ace1328be188b870767234219abf5db1b6a2db5131114dac6b6fef5cc7813c381653a752c5f65511f4bcc8c1952b7c350d158ec5b8438ec00b87d8688fa3fd59bac22de5cccb4fe3a2b25d082740d08211951c2f0332c198ee098cd0c2b56e3eb08603c4e1d2f8d8867e6078b212f16099769296cb8532dd1393cfc4310c4b3f381d07756483b3f4709ffaf60ba6ebcb84c5ec13ccced543254318d7ab594383911d52c843f3a391fec76543d3c857ffe348c4ff471c6e7800d3d8d488615bc9c9ebd4277ef2b0c1c7f22b9d9993eeb1ca5e603cdfbde25ebeca1a3b24dad7248001f8808a88b90e200f91b8292f1221a63777ef2a99cd772b7f97d7cf985587d9829829a283bacb921d86a66b599597bc1a35d0debc32888a00d2a039ed71b94129066060398be4b9e0468ed8716cdda03960a02358b427d79082fe4ac3aec681e07391a2d22c03fd0a341ad289a63633d11692430b9848158490bd18bb16c134544488deffb1d1fda7c4d1fe181387429d6db13936cdf4f1a0fb4f0eb168d33ba3e0ec30d48410b89dc5b4f4654655d97d534661542dc7718cc7163a695c8d790f099442bdd3547968c6f26db035c36d6a8f985019e139405ddcbe1fa511fac11db59dae49a231a9622cc2bc93a9ffe348c4f547c466de5e161e5b6eae3818150851927a30adb130a96132383f552a56a24bdaa1e21d25a5b5bd6b7b97d35bc7cc2d5f50275140220c7ffffe38fe5855cadeb5ae6e997ca82b08304a115a6c152cc2572bb76f3cb5dfce53f56ac02e4ba504a6918670d3e740e7792dfd3c5e8fbccb9afddda2bafec3b0c384c391582cd9398773272946b2018235c8161c7e6ceef76af222febfae4bb4e545a22ce658c39bab648bcc5fa5def1ad963350f469f66b4ef4adc9709a2a74a13925d2d1db72de5ab357e532dd658ca5f677a5d2e7d5aece3b501bacecc4b38944afe59d3769708d77766b63bc794d9cb66abe773b5f9fcc7ffff766ae3aefe5dab87799635ab5aeea9bb8d5a6ed5b92eb5976adb8ce1437bb972ad3534aa9b3a596d2ffe348c4e943044ea24159c801c7a1db94ddfddcbf4b437aedcaf95cffcbbffbe6ad7fe58e16b1c33c30bbda4f1fac56bb71f5a391cbdf0712fb4e0c0c01848db3e65ad041381c046c6000c014f661d0a87150540060a029ff5aa605431304d641c3a266682284000787e343e21139888400e332da7f48824be46a59a63ce4090194bb20a073081535a5b33708324073591932510b024221d66943002935a401043074836f402e025c215266219ab58d018e92a3905824c50380cf24834988152d307143a02053766cd29a6a9f65c62c6e65c18be4ca00c384c0810000e04061680580030001a0e896440c6023032186024e60e2c409a62800152930e1d32c74875ef7adb66e8141b048920dc29f979eb18d91828780448380061c1c24126380ffe348c4f066f3c25c019cd8008856986a361006e29ce1b9c9be0594cc4538ca08cc24eccd91c1c282c4e5a1318060e22988b85421214680e3903c921d8da42a3ea7eb13437b91c4c25492d721c46a2988dde14d6d578583088283061f73190128055304ba07009002a44a128bbc16096817dfa8e3c4adcc1d5dc43189c8e1e964a5cc4d480592b2f8b58872067d230cb5c77225ae7b3b6cef53527003818b945ef60c23065f68da210972a015814b92eb2b43e6c18ac1524e94822510be8007fffc5a15ab9a6719b2b1764e0d01b83802fc961c4f75f7ade25b3c94842698e3b61382c048cea3290dc314ce6c0a84f9c172763d641c9d9733ae228d8958f6f11b98de2eddb5302814932810c8f73934a76e788b438a6569744d447999e33f6fffe348c467398c6eba37cf7800736388bd09b61ddc9d3f6e6f607ed09d6ade9eba7d0e9023d71bde3eedbcebffad575eb9fab6f3fdbefff9fffff38cef19d7ffffdee2dbae356aef1f38b7d6fdbe751ad5811e4678be95c47f7ac5d7c41c4095c55d11ea558174af42174917bb8ad5d3306234c5b41999a1e9aa3c98cbe835890ad9adf4c55d6e166b4709e2d51800024877ffffeef2cd59135d6060529b46163034218d2f68082a455b9a143b2e650f92a99b625aa1a6944c59a05021d4bd29ca5c52d2a4aa7a88ca1d31028b2a1cd2870f3414e02150e83c6300d1a0185311d4a5ca5e0c2e2c5d15ce9665e92ff213540101c89a80c4392822ca1a32653097792f5409a68e06d20fb492ff3d28a2b0ca995b92f9893395e29825f443496906ffe348c49338fbba9df2c3c740329edd3a84a79447eb4cb58d5856b0a060250a06690c0567b7a916470cff8518d498f25ab95e1c3fe7e7fffff9ffbe5093f94d727322965a59f6a43e010a526804042804f10960298d66403d8f12baebda300cb3cffff1ee1297e95e085cc1d9ccdd1263d8c177a59ca92857016663a6473173c121a0304a9a23f37b3afe5a6b440126a30a6290064850505638121c32170251273db58d3f0ec9811813082095109079e75358c39cfabfcf1b4910349c2a95605135002d41139b4506696fea83051d0e690596946234e544e05821ad3d29c80664f520c0550515958e3737963b29a2943480a8a63303828f1c868aa8dd5ef7125aefd3580b005c2330a5682ffaff5305716236fe380c401861a87038c745c79fffe348c4c2521c568140de50fda2a18dc371b7fe2ebcd5db775d70539163f586ec3c0a690e5986e7f9cee797db8fb138bd246fb7b0fcfb8523eeb1e7e92f53dbfde17250ca19400005f8cedfb89b8f6a661bb70c3382ea0716d81623db8dacb2ab4928761d04846992b87ee4bf5ba7a7cf3c61ba28dcfd208909c1678a68a2e3e34877706e718fa53dd218783e238c314b4c651530003ffbafdf7e0a6bf1c51c30894da6228b10339b289465bb59d0d82ff0816980426d509830e5db6b74db8ad037100153650cde195f4320a0d89d36efdfedfe3225758a128f91e40d637e0c8ccc29853b9271919dfe6aba398ea7686b6b32a2557bf676b6d2fc7539ab603d7378e16f15e8f92f2733f8148d5c3e7d08fe11e0729a82dc824ea85b98a3c24fffe348c48c43c40e8de15a78001d45b84d85c89d09b1949d8aad8348073093005c1192a863275d67732ed88ea20c71275a13ce5ed5a672f55b115d015dbd6fda1427af711b6f756b62cfa7529a2a95d1d50155066b2990e2dc4187a5094f4e7eaa6cd717d6ac2cacaf589450a3bd93c291994d1602ba3b2e2f5f884ae574756ba574f1b35ad60d416113c12031e2be25025055208a3ca22321043f9cc810137da411d30500332b7e238386a0481e60e826629ddc70313638168f07c635a8424e7981e240d0746320666732cc6e588e101001006306da4384414402980605184e2b19421816ed4ac943193e0522ea2a56ae8082aba31409a1cd207a6d024751ca1f0200261adaf6709fc490308f0b3e9ec303c1c01afdd9a068e124cad8cb532dffe348c4905a5bc258519dd00085a03d5213032e6441a53dc17403c5e4f1e5e280d77e2d2aa2781825ba49c8fb5a6d15229a5f4122d12dbab686076f709eacb4a961ca91a6bccde28e949eb4b60881f0a2b765ac4667c207a983b8bb15e45d411c46b6cb5f64d4db496de096229cacfe82ec6ad4ae92edd801c075e45cba8d2e3481b4a77ee75389411ff63eb0680f2de479a7a198283bec65c08c009a7d6009bca198ac75bf82e69c66acde32d56d77e9a72fc0503c9285fd9b7ea7fe0d6545802ea3c8c12341810cb08119732a1c78617bd1fca031821c18218096feb2088304993028b2a6ea6dc290c40a87b30400fcb7765fdc31a6bd8df5941871302649b29576675a98599724d1d1bf6a765d397b5e88bbaaccb160daedea15bc0d3273ffe348c4394913c2a65199d0000e184427adacb2e4edc250a69c63fb66776d09885d7527ef43cf2b30316755ae667282c0049bb4007c83ef2d1d4940c036fe6a172b87a037c19bb16668254de9795faa62fb80043288a3cc654128a3891bc52a4c22f0ee91995d3d0d348e5914b0d6ddf8dc3cfc77ac317bdcbf354efe061f9e94dbbad6c0cfe4f8cc581404631129c5595599a6e0ea5240f20b74715ec72c523eadb9930bcc6aead33f6fefc6a494d6994bfa8138ad3635622fa3977b197c761c955b9051b1058f21755db73dda775ae2e0a6b50cb4f93c6f91a7d9bf97cd4baf524f4b9c287b2eb829c8937dc6f4cc21d4c2d6abbeb01f2a9984119afffda9e243be3d9f46b64ba88c36ff6f9c66d8f9cd739528dd090964484b9df77c6fefffe348c4273553a6ae01cf78017acdf39807f013c0068b787d37948e1a9f3e5de27de31b3f406d12a0e60b508e8f35045ccf8ef330ef4cb0a84aa05493018611c046c2ee98bb8631587782e87306a46c05d0b68ee202511d275c4c5f5484f95d3a98b726cfd595736b6436bb44d57e3fcd5ea1a74cd19ec0813d2f8a7afcfff0c4ae8daae3ebfff5fff8851a53f50e8d89ded21d330738b5719ac8c2ad813c1927ada1418d11fda04d8b86923c1aab81dd70ad596a7b65d8f9be952a600dfa7f57d9656346429d85b9bdb3723000dc0692d5b158948af956a178fa58152d71e1650613174a2d4d2da6affa86a36e4d896de99a4af4ac05721a6c066c8180bdb1aa78760c54d0431289c268dc9bd0d436b99a7981a6c0ae958b043ccfac892f5affe348c46439146e89407e0cb88b3a9740305407147f5f04252752899bb67668292e4438d7a4ece6921a9757e739b94c190b715d281e5d1aaf3b5bb8f3bcad97e5e0925c898021d7275d3cffdab748e3c944a8dd9f5bfbbf7a79ffd4cf79cfbbda9fd6f73b667f79ffcffff6ed27260151c96124bf7ed5fce373891e48955557f34f3fbe5496130492f5be6092ea22501955ca642bc28c9d5c239bc9cac9fa649bc6547481a312d77b57b00952c0fa0ea0fd0d124479ac1d50094760d588586c71006375309eae2a965299128f973d8bbdd0e47db4b51b2eb3668c8121dbd988ebac746464f55db5721757424da257a8645d269541a96494e364d4246842536e2def5a997b82527555ae4dab8f32eb262eb4a92966b9679961ee251ecd4e4c5dffe348c492366c5e50f07b0cbdd77d73daeed091646abffa0a371cd5032e71bb7ef35ad5d8196dbfbd7625bcd512ffbc24ed458051ee6a3da4d47cccce679cab36675aaa89124bbcf7fca254680426489123268ddd4c414d45332e39392e355555555555559ba0001745d0859889654da130a95794ec8b68d3a8be9847c27de436a6f812b7362d9c26917d3b8f73d0d9364e447acbecffbaf1b8911061224c3e1d8b28b2e172da89205126134179b3455a929a34e1224cb8b62ca2c0cc5a2d6892125c5c5a922271c7a0b452220c240cc4d5539469a51f09860a051455c5b3f766b5244490902033e2da4e4d45e6e95d5d5c235acacaa49a90dcfb9242221a2340db2d2ab26bc37ff1abbfffd8c954e13734ca2211a38bc2756b2a58e2ec36e6ffe348c4bb33c445e8147992d999445535270dc92ab55d5d5c955925e01950ee0e4c414d45332e39392e355555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555ffe348c40000000348000000004c414d45332e39392e35555555555555555555554c414d45332e39392e355555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555ffe348c40000000348000000004c414d45332e39392e35555555555555555555554c414d45332e39392e355555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555'
</script>

<script type="text/javascript">
  let audioContext = null;
  let audioSource = null;
  let isPlaying = false;

  // 十六进制字符串转ArrayBuffer
  function hexStringToArrayBuffer(hex) {
    if (hex.length % 2 !== 0) {
      throw new Error('十六进制字符串长度必须是偶数');
    }

    const buffer = new ArrayBuffer(hex.length / 2);
    const view = new Uint8Array(buffer);

    for (let i = 0; i < hex.length; i += 2) {
      const byte = parseInt(hex.slice(i, i + 2), 16);
      if (isNaN(byte)) {
        throw new Error(`无效的十六进制字符: ${hex.slice(i, i + 2)}`);
      }
      view[i / 2] = byte;
    }

    return buffer;
  }
  var view = new DataView(hexStringToArrayBuffer(window.hexStr))
  console.log(view);

  // 显示状态信息
  function showStatus(message, isError = false) {
    const statusDiv = document.getElementById('status');
    statusDiv.innerHTML = `<div class="status ${isError ? 'error' : 'success'}">${message}</div>`;
  }

  // 播放音频
  async function playAudio() {
    const hexInput = document.getElementById('hexInput').value.trim();

    if (!hexInput) {
      showStatus('请输入十六进制字符串', true);
      return;
    }

    try {
      // 转换十六进制字符串为ArrayBuffer
      const arrayBuffer = hexStringToArrayBuffer(hexInput);

      // 创建AudioContext
      if (!audioContext) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
      }

      // 解码音频数据
      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

      // 创建音频源
      audioSource = audioContext.createBufferSource();
      audioSource.buffer = audioBuffer;
      audioSource.connect(audioContext.destination);

      // 播放音频
      audioSource.start(0);
      isPlaying = true;

      // 更新按钮状态
      document.getElementById('playBtn').disabled = true;
      document.getElementById('stopBtn').disabled = false;

      showStatus(`音频播放成功！时长: ${audioBuffer.duration.toFixed(2)}秒`);

      // 播放结束时的处理
      audioSource.onended = () => {
        isPlaying = false;
        document.getElementById('playBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
        showStatus('音频播放结束');
      };

    } catch (error) {
      showStatus(`播放失败: ${error.message}`, true);
      console.error('播放错误:', error);
    }
  }

  // 停止播放
  function stopAudio() {
    if (audioSource && isPlaying) {
      audioSource.stop();
      isPlaying = false;
      document.getElementById('playBtn').disabled = false;
      document.getElementById('stopBtn').disabled = true;
      showStatus('音频已停止');
    }
  }

  // 加载示例音频数据
  function loadSampleAudio() {
    const hex = '';

    // 这是一个简单的正弦波音频的十六进制表示（WAV格式）
    const sampleHex = '52494646' + // RIFF
      '24000000' + // 文件大小
      '57415645' + // WAVE
      '666d7420' + // fmt 
      '10000000' + // fmt chunk size
      '0100' +     // 音频格式 (PCM)
      '0100' +     // 声道数
      '44ac0000' + // 采样率 (44100)
      '88580000' + // 字节率
      '0200' +     // 块对齐
      '0800' +     // 位深度
      '64617461' + // data
      '00000000';  // 数据大小

    const arrBuffer = new ArrayBuffer()
    const int8 = new Int8Array();


    document.getElementById('hexInput').value = sampleHex;
    showStatus('已加载示例音频数据（静音WAV文件）');
  }

  // 页面加载时初始化
  window.addEventListener('load', () => {
    showStatus('音频播放器已准备就绪');
  });
</script>

</body>

</html>